<template>
  <div id="ssc" v-loading="loading" element-loading-text="加载中">
    <p class="title">选择商品分类</p>

    <el-autocomplete v-model="searchModel"
      style="width: 100%"
      class="mar-b-20"
      clearable
      :fetch-suggestions="querySearch"
      @select="searchSelect"
      placeholder="请输入关键词搜索分类"
    >
      <template slot="prepend"><i class="el-icon-search"></i></template>
    </el-autocomplete>

    <el-cascader-panel :options="thirdCategoryList" 
      v-model="thirdCategoryId" 
      class="mar-b-20"
      ref="cascaderPanel"
      @change="doChangeCasCader"
      :props="{ emitPath: false }"
    >
    </el-cascader-panel>

    <div class="show-select" v-if="thirdCategoryFullLabel">
      <span>已选分类</span>
      <span>&nbsp;&nbsp;&nbsp;</span>
      <span>{{ thirdCategoryFullLabel }}</span>
    </div>

    <div slot="footer" class="dialog-footer mar-t-30 mar-b-10">  
      <!-- <el-button @click="doClose">取消</el-button> -->
      <el-button type="primary" @click="doNext">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import { getThirdCategoryTree } from '@/api/goods/thirdCategory'

  export default {
    props: {
      // 平台类型
      platformType: {
        type: Number
      },
      // 店铺id
      shopId: {
        type: String
      }
    },
    data() {
      return {
        searchModel: '',
        // 第三方分类id
        thirdCategoryId: '',
        // 第三方分类名称
        thirdCategoryFullLabel: '',
        // 分类搜索数据
        suggestionsList: [],
        // 平台分类列表
        thirdCategoryList: [],
        loading: false
      }
    },
    created() {
      if (!this.platformType) {
        this.$message({ type: 'error', message: '平台不能为空' })
        return
      }
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.loading = true
        // 抖音分类店铺级
        const shopId = this.platformType === 1 ? this.shopId : ''
        getThirdCategoryTree(this.platformType, shopId).then(response => {
          this.loading = false
          if (response.isError) return
          this.thirdCategoryList = response.data
          const suggestionsList = []
          this.thirdCategoryList.forEach(item => {
            const obj = {
              value: item.label,
              categoryId: item.categoryId
            }
            this.loopText(item.children, obj, suggestionsList)
          })
          this.suggestionsList = suggestionsList
        })
      },
      loopText(children, obj, list) {
        if (children && children.length > 0) {
          children.forEach(item => {
            const newObj = {
              value: obj.value + ' -> ' + item.label,
              categoryId: item.categoryId
            }
            this.loopText(item.children, newObj, list)
          })
        } else {
          list.push(obj)
        }
      },
      querySearch(queryString, cb) {
        var results = queryString ? this.suggestionsList.filter(item => item.value.indexOf(queryString) !== -1) : this.suggestionsList
        cb(results)
      },
      // 输入选择分类事件
      searchSelect(item) {
        this.$refs['cascaderPanel'].activePath = []
        this.thirdCategoryId = item.categoryId
        this.$nextTick(() => this.getCategoryLabel())
      },
      // 选择分类事件
      doChangeCasCader(val) {
        this.getCategoryLabel()
      },
      // 获取分类名
      getCategoryLabel() {
        const node = this.$refs['cascaderPanel'].getCheckedNodes()
        if (node) {
          this.thirdCategoryFullLabel = node[0].pathLabels.join(' -> ')
        }
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      },
      // 下一步事件
      doNext() {
        if (!this.thirdCategoryId) {
          this.$message({ type: 'error', message: '请选择分类' })
          return
        }
        this.$emit('next', this.thirdCategoryId, this.thirdCategoryFullLabel)
      }
    }
  }
</script>

<style lang="less" scoped>
  #ssc {
    padding: 0 10%;
    /deep/ .el-cascader-panel {
      width: 100%;
    }
    /deep/ .el-cascader-menu__wrap {
      height: calc(100vh - 330px)
    }
    /deep/ .el-cascader-menu {
      width: 33%;
    }
  }
  .show-select {
    background: #f7f8fa;
    padding: 12px;
    font-size: 14px;
  }
  .title {
    background: #f7f8fa;
    padding: 12px;
    font-size: 18px;
    border-radius: 5px;
  }
</style>